<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>用户资料 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式变量 */
    :root {
      --primary: #4263EB;
      --primary-light: #E8F0FE;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      height: 100vh;
      overflow-x: hidden;
    }
    
    /* 页面容器 */
    .profile-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 顶部导航 */
    .profile-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 内容区域 */
    .profile-content {
      flex: 1;
      overflow-y: auto;
    }
    
    /* 个人信息头部 */
    .profile-header-section {
      background-color: var(--white);
      padding-bottom: 20px;
    }
    
    .cover-photo {
      height: 140px;
      background-color: var(--primary-light);
      position: relative;
    }
    
    .avatar-container {
      display: flex;
      justify-content: center;
      margin-top: -60px;
      padding: 0 16px;
    }
    
    .profile-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--white);
    }
    
    .profile-name {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      margin: 12px 0 4px;
    }
    
    .profile-status {
      text-align: center;
      font-size: 14px;
      color: var(--success);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .profile-status i {
      font-size: 10px;
      margin-right: 6px;
    }
    
    .profile-actions {
      display: flex;
      gap: 10px;
      padding: 0 16px;
      margin-bottom: 12px;
    }
    
    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #3652d2;
    }
    
    .btn-secondary {
      background-color: var(--light);
      color: var(--dark);
    }
    
    .btn-secondary:hover {
      background-color: #E5E7EB;
    }
    
    /* 资料详情区域 */
    .profile-details {
      background-color: var(--white);
      margin-top: 12px;
      border-top: 1px solid var(--border);
    }
    
    .detail-section {
      padding: 16px;
      border-bottom: 1px solid var(--border);
    }
    
    .section-title {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    .detail-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    
    .detail-item:last-child {
      border-bottom: none;
    }
    
    .detail-label {
      width: 80px;
      font-size: 16px;
      color: var(--secondary);
    }
    
    .detail-value {
      flex: 1;
      font-size: 16px;
    }
    
    .detail-value a {
      color: var(--primary);
      text-decoration: none;
    }
    
    .detail-value .badge {
      background-color: var(--primary-light);
      color: var(--primary);
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 500;
    }
    
    /* 社交信息区域 */
    .social-info {
      display: flex;
      gap: 16px;
      padding: 12px 0;
    }
    
    .social-item {
      text-align: center;
      flex: 1;
    }
    
    .social-count {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    
    .social-label {
      font-size: 14px;
      color: var(--secondary);
    }
    
    /* 标签区域 */
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 0;
    }
    
    .profile-tag {
      background-color: var(--light);
      color: var(--dark);
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 14px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 编辑资料弹窗 */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .modal-backdrop.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal {
      background-color: var(--white);
      border-radius: 16px;
      width: 90%;
      max-width: 360px;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(20px);
      transition: transform 0.3s;
    }
    
    .modal-backdrop.active .modal {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--gray);
      cursor: pointer;
    }
    
    .modal-body {
      padding: 16px;
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 6px;
    }
    
    .form-control {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 16px;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .modal-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .modal-btn-secondary {
      background-color: var(--light);
      color: var(--dark);
      border: none;
    }
    
    .modal-btn-primary {
      background-color: var(--primary);
      color: white;
      border: none;
    }
    
    /* 顶部提示 */
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background-color: var(--dark);
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    
    .toast.active {
      transform: translateX(-50%) translateY(0);
    }
    
    /* 风格1：默认蓝 */
    #style1 .detail-value .badge {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .profile-header-section,
    #style2 .profile-details {
      background-color: var(--white);
      border-radius: 16px;
      margin: 12px;
      box-shadow: var(--shadow);
    }
    
    #style2 .profile-header {
      background-color: transparent;
      border-bottom: none;
      padding: 16px 20px;
    }
    
    #style2 .cover-photo {
      border-radius: 16px 16px 0 0;
      height: 160px;
    }
    
    #style2 .detail-item {
      padding: 14px 0;
    }
    
    #style2 .action-btn {
      padding: 12px 0;
      border-radius: 12px;
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --light: #374151;
      --primary-light: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .profile-header,
    #style3 .profile-header-section,
    #style3 .profile-details,
    #style3 .modal {
      background-color: var(--white);
    }
    
    #style3 .detail-label,
    #style3 .social-label,
    #style3 .section-title {
      color: var(--gray);
    }
    
    #style3 .action-btn.btn-secondary {
      background-color: var(--light);
      color: var(--dark);
    }
    
    #style3 .profile-tag {
      background-color: var(--light);
      color: var(--dark);
    }
    
    #style3 .toast {
      background-color: rgba(255,255,255,0.8);
      color: var(--dark);
    }
    
    #style3 .form-control {
      background-color: var(--light);
      color: var(--dark);
      border-color: #4B5563;
    }
    
    /* 风格4：简约风 */
    #style4 {
      --primary: #374151;
      --primary-light: rgba(55, 65, 81, 0.1);
    }
    
    #style4 .profile-header-section,
    #style4 .profile-details {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    #style4 .cover-photo {
      height: 120px;
    }
    
    #style4 .profile-avatar {
      width: 100px;
      height: 100px;
    }
    
    #style4 .profile-name {
      font-size: 20px;
    }
    
    #style4 .action-btn {
      font-size: 15px;
      padding: 9px 0;
    }
    
    #style4 .detail-item {
      padding: 10px 0;
    }
    
    #style4 .detail-label,
    #style4 .detail-value {
      font-size: 15px;
    }
    
    #style4 .social-count {
      font-size: 16px;
    }
    
    #style4 .social-label {
      font-size: 13px;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 页面容器 -->
  <div class="profile-container">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="profile-style active">
      <!-- 顶部导航 -->
      <div class="profile-header">
        <button class="header-btn" id="backBtn1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">个人资料</h1>
        <button class="header-btn" id="editBtn1">
          <i class="fa fa-pencil"></i>
        </button>
      </div>
      
      <!-- 内容区域 -->
      <div class="profile-content">
        <!-- 个人信息头部 -->
        <div class="profile-header-section">
          <div class="cover-photo" style="background-image: url('https://picsum.photos/800/300?random=100'); background-size: cover; background-position: center;"></div>
          
          <div class="avatar-container">
            <img src="https://picsum.photos/200/200?random=1" alt="头像" class="profile-avatar">
          </div>
          
          <h2 class="profile-name">张小明</h2>
          <div class="profile-status">
            <i class="fa fa-circle"></i> 在线
          </div>
          
          <div class="profile-actions">
            <button class="action-btn btn-primary">
              <i class="fa fa-comment"></i> 发消息
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-user-plus"></i> 关注
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="detail-section" style="padding-top: 0;">
            <div class="social-info">
              <div class="social-item">
                <div class="social-count">128</div>
                <div class="social-label">动态</div>
              </div>
              <div class="social-item">
                <div class="social-count">356</div>
                <div class="social-label">关注</div>
              </div>
              <div class="social-item">
                <div class="social-count">1,243</div>
                <div class="social-label">粉丝</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 资料详情区域 -->
        <div class="profile-details">
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">昵称</div>
              <div class="detail-value">张小明</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">性别</div>
              <div class="detail-value">男</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">年龄</div>
              <div class="detail-value">28岁</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">地区</div>
              <div class="detail-value">北京市 海淀区</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">个人简介</h3>
            
            <div class="detail-item" style="border-bottom: none;">
              <div class="detail-value">产品设计师 | 关注用户体验与交互设计 | 喜欢摄影和旅行</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">职业信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">公司</div>
              <div class="detail-value">创新科技有限公司</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">职位</div>
              <div class="detail-value">高级产品设计师</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">行业</div>
              <div class="detail-value">互联网/科技</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">联系方式</h3>
            
            <div class="detail-item">
              <div class="detail-label">电话</div>
              <div class="detail-value">138****5678</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">邮箱</div>
              <div class="detail-value">zhang***@example.com</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">微信</div>
              <div class="detail-value">zhang_xm123</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">兴趣标签</h3>
            
            <div class="tags-container">
              <span class="profile-tag">产品设计</span>
              <span class="profile-tag">用户体验</span>
              <span class="profile-tag">摄影</span>
              <span class="profile-tag">旅行</span>
              <span class="profile-tag">阅读</span>
              <span class="profile-tag">电影</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="profile-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="profile-header">
        <button class="header-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">个人资料</h1>
        <button class="header-btn" id="editBtn2">
          <i class="fa fa-pencil"></i>
        </button>
      </div>
      
      <div class="profile-content">
        <div class="profile-header-section">
          <div class="cover-photo" style="background-image: url('https://picsum.photos/800/300?random=100'); background-size: cover; background-position: center;"></div>
          
          <div class="avatar-container">
            <img src="https://picsum.photos/200/200?random=1" alt="头像" class="profile-avatar">
          </div>
          
          <h2 class="profile-name">张小明</h2>
          <div class="profile-status">
            <i class="fa fa-circle"></i> 在线
          </div>
          
          <div class="profile-actions">
            <button class="action-btn btn-primary">
              <i class="fa fa-comment"></i> 发消息
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-user-plus"></i> 关注
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="detail-section" style="padding-top: 0;">
            <div class="social-info">
              <div class="social-item">
                <div class="social-count">128</div>
                <div class="social-label">动态</div>
              </div>
              <div class="social-item">
                <div class="social-count">356</div>
                <div class="social-label">关注</div>
              </div>
              <div class="social-item">
                <div class="social-count">1,243</div>
                <div class="social-label">粉丝</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="profile-details">
          <!-- 内容与风格1相同 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">昵称</div>
              <div class="detail-value">张小明</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">性别</div>
              <div class="detail-value">男</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">地区</div>
              <div class="detail-value">北京市 海淀区</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">职业信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">公司</div>
              <div class="detail-value">创新科技有限公司</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">职位</div>
              <div class="detail-value">高级产品设计师</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">兴趣标签</h3>
            
            <div class="tags-container">
              <span class="profile-tag">产品设计</span>
              <span class="profile-tag">用户体验</span>
              <span class="profile-tag">摄影</span>
              <span class="profile-tag">旅行</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="profile-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="profile-header">
        <button class="header-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">个人资料</h1>
        <button class="header-btn" id="editBtn3">
          <i class="fa fa-pencil"></i>
        </button>
      </div>
      
      <div class="profile-content">
        <div class="profile-header-section">
          <div class="cover-photo" style="background-image: url('https://picsum.photos/800/300?random=100'); background-size: cover; background-position: center;"></div>
          
          <div class="avatar-container">
            <img src="https://picsum.photos/200/200?random=1" alt="头像" class="profile-avatar">
          </div>
          
          <h2 class="profile-name">张小明</h2>
          <div class="profile-status">
            <i class="fa fa-circle"></i> 在线
          </div>
          
          <div class="profile-actions">
            <button class="action-btn btn-primary">
              <i class="fa fa-comment"></i> 发消息
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-user-plus"></i> 关注
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-ellipsis-h"></i>
            </button>
          </div>
          
          <div class="detail-section" style="padding-top: 0;">
            <div class="social-info">
              <div class="social-item">
                <div class="social-count">128</div>
                <div class="social-label">动态</div>
              </div>
              <div class="social-item">
                <div class="social-count">356</div>
                <div class="social-label">关注</div>
              </div>
              <div class="social-item">
                <div class="social-count">1,243</div>
                <div class="social-label">粉丝</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="profile-details">
          <!-- 内容与风格1相同 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">昵称</div>
              <div class="detail-value">张小明</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">性别</div>
              <div class="detail-value">男</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">年龄</div>
              <div class="detail-value">28岁</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">地区</div>
              <div class="detail-value">北京市 海淀区</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">个人简介</h3>
            
            <div class="detail-item" style="border-bottom: none;">
              <div class="detail-value">产品设计师 | 关注用户体验与交互设计 | 喜欢摄影和旅行</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风 -->
    <div id="style4" class="profile-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="profile-header">
        <button class="header-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">个人资料</h1>
        <button class="header-btn" id="editBtn4">
          <i class="fa fa-pencil"></i>
        </button>
      </div>
      
      <div class="profile-content">
        <div class="profile-header-section">
          <div class="cover-photo" style="background-image: url('https://picsum.photos/800/300?random=100'); background-size: cover; background-position: center;"></div>
          
          <div class="avatar-container">
            <img src="https://picsum.photos/200/200?random=1" alt="头像" class="profile-avatar">
          </div>
          
          <h2 class="profile-name">张小明</h2>
          <div class="profile-status">
            <i class="fa fa-circle"></i> 在线
          </div>
          
          <div class="profile-actions">
            <button class="action-btn btn-primary">
              <i class="fa fa-comment"></i> 消息
            </button>
            <button class="action-btn btn-secondary">
              <i class="fa fa-user-plus"></i> 关注
            </button>
          </div>
          
          <div class="detail-section" style="padding-top: 0;">
            <div class="social-info">
              <div class="social-item">
                <div class="social-count">128</div>
                <div class="social-label">动态</div>
              </div>
              <div class="social-item">
                <div class="social-count">356</div>
                <div class="social-label">关注</div>
              </div>
              <div class="social-item">
                <div class="social-count">1,243</div>
                <div class="social-label">粉丝</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="profile-details">
          <!-- 内容与风格1相同 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">昵称</div>
              <div class="detail-value">张小明</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">性别</div>
              <div class="detail-value">男</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">年龄</div>
              <div class="detail-value">28岁</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">地区</div>
              <div class="detail-value">北京市 海淀区</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">职业信息</h3>
            
            <div class="detail-item">
              <div class="detail-label">公司</div>
              <div class="detail-value">创新科技有限公司</div>
            </div>
            
            <div class="detail-item">
              <div class="detail-label">职位</div>
              <div class="detail-value">高级产品设计师</div>
            </div>
          </div>
          
          <div class="detail-section">
            <h3 class="section-title">联系方式</h3>
            
            <div class="detail-item">
              <div class="detail-label">微信</div>
              <div class="detail-value">zhang_xm123</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 编辑资料弹窗 -->
  <div class="modal-backdrop" id="editProfileModal">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">编辑个人资料</h3>
        <button class="modal-close" id="closeEditModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">昵称</label>
          <input type="text" class="form-control" value="张小明">
        </div>
        
        <div class="form-group">
          <label class="form-label">性别</label>
          <select class="form-control">
            <option>男</option>
            <option>女</option>
            <option>保密</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">年龄</label>
          <input type="number" class="form-control" value="28">
        </div>
        
        <div class="form-group">
          <label class="form-label">地区</label>
          <input type="text" class="form-control" value="北京市 海淀区">
        </div>
        
        <div class="form-group">
          <label class="form-label">个人简介</label>
          <textarea class="form-control" rows="3">产品设计师 | 关注用户体验与交互设计 | 喜欢摄影和旅行</textarea>
        </div>
        
        <div class="form-group">
          <label class="form-label">公司</label>
          <input type="text" class="form-control" value="创新科技有限公司">
        </div>
        
        <div class="form-group">
          <label class="form-label">职位</label>
          <input type="text" class="form-control" value="高级产品设计师">
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelEditBtn">取消</button>
        <button class="modal-btn modal-btn-primary" id="saveEditBtn">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 顶部提示 -->
  <div class="toast" id="toastNotification">资料已更新</div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.profile-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).classList.add('active');
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 返回按钮功能
    document.querySelectorAll('[id^="backBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('返回通讯录');
      });
    });
    
    // 编辑按钮功能
    document.querySelectorAll('[id^="editBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        document.getElementById('editProfileModal').classList.add('active');
      });
    });
    
    // 关闭编辑弹窗
    document.getElementById('closeEditModal').addEventListener('click', function() {
      document.getElementById('editProfileModal').classList.remove('active');
    });
    
    // 取消编辑
    document.getElementById('cancelEditBtn').addEventListener('click', function() {
      document.getElementById('editProfileModal').classList.remove('active');
    });
    
    // 保存编辑
    document.getElementById('saveEditBtn').addEventListener('click', function() {
      document.getElementById('editProfileModal').classList.remove('active');
      showToast('资料已更新');
    });
    
    // 关注按钮功能
    document.querySelectorAll('.action-btn.btn-secondary:nth-child(2)').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.innerHTML.includes('关注')) {
          this.innerHTML = '<i class="fa fa-check"></i> 已关注';
          this.classList.remove('btn-secondary');
          this.classList.add('btn-primary');
          showToast('已关注该用户');
        } else {
          this.innerHTML = '<i class="fa fa-user-plus"></i> 关注';
          this.classList.remove('btn-primary');
          this.classList.add('btn-secondary');
          showToast('已取消关注');
        }
      });
    });
    
    // 发消息按钮功能
    document.querySelectorAll('.action-btn.btn-primary').forEach(btn => {
      if (btn.innerHTML.includes('发消息')) {
        btn.addEventListener('click', function() {
          showToast('进入聊天界面');
        });
      }
    });
    
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toastNotification');
      toast.textContent = message;
      toast.classList.add('active');
      
      setTimeout(() => {
        toast.classList.remove('active');
      }, 2000);
    }
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.profile-style').forEach(style => {
      if (!style.classList.contains('active')) {
        style.style.display = 'none';
      }
    });
  </script>
</body>
</html>
